<!DOCTYPE html>
<html lang="en" xml:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户编辑</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        .batch {
            display: inline-block;
        }

        .batch > div {
            margin: 7px;
            width: 273px;
            height: 120px;
            display: inline-block;
            text-align: center;
            border-radius: 4px;
            line-height: 30px;
            box-shadow: 0 1px 3px 0 rgba(18, 18, 18, 0.1);
        }
    </style>
</head>
<body>
<div class="layui-container" style="width:900px;height: 100%">
    <form class="layui-form layui-form-pane" action="" lay-filter="userInfo">
        <input name="id" hidden>
        <input name="patientId" th:value="${entity.id}" hidden>
        <div class="layui-form-item">
            <div class="layui-form-label ">科室</div>
            <div class="layui-input-block">
                <select name="departmentId" id="departmentId" lay-verify="required" lay-search lay-filter="change"
                        required>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-form-label ">医生</div>
            <div class="layui-input-block">
                <select name="doctorId" id="doctorId" lay-verify="required" lay-search lay-filter="changeDoctorId">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-form-label ">批次</div>
            <div class="layui-input-block">
            </div>
            <div class="batch" id="batch">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">保存</button>
            </div>
        </div>
    </form>
</div>
</body>

<script src="/layui/layui.js"></script>
<script src="/js/core.util.js"></script>
<script>
    layui.use(['jquery', 'form'], function () {
        var layer = layui.layer;
        var $ = layui.jquery;
        var form = layui.form;

        layer.open({
            content: `
            1.预约挂号时间：提前8天晚上19:00发放号源，号源有限，约满为止。

            2.预约挂号要求：就诊人信息必须填写患者本人姓名及有效身份证号码，同时须提供正确的联系方式和住址，以便于特殊情况及时通知。初次就诊患者，可选择在线建卡功能，填入本人姓名、有效身份证号、手机号及住址后进行预约挂号。

            3.实行分时段预约挂号，请患者选择合适的时间段预约就诊。

            4.预约时请务必仔细核对医院院区、预约时间、科室名称、医生姓名，一旦预约成功不可修改。预约成功后，会有预约成功消息提示。
            `
        });
        CoreUtil.sendAjax("/health/department/options", null, function (res) {
            if (res.list != null) {
                let list = res.list;
                let indicators = $("#departmentId");
                indicators.append("<option>请选择</option>")
                list.map(value => {
                    indicators.append(" <option value=\"" + value.id + "\">" + value.name + "</option>")
                })
            }
            form.render();
        }, "GET", false);

        form.on('select(change)', (data) => {
            $("#doctorId").html("")
            console.log(data)
            if (data.value !== "请选择") {
                CoreUtil.sendAjax("/health/doctor/options", {departmentId: data.value}, function (res) {
                    if (res.list != null) {
                        let list = res.list;
                        let indicators = $("#doctorId");
                        indicators.append("<option>请选择</option>")
                        list.map(value => {
                            indicators.append(" <option value=\"" + value.id + "\">" + value.name + "</option>")
                        })
                    }
                    form.render();
                }, "GET", false);
            }

        })


        form.on('select(changeDoctorId)', (data) => {
            $("#batch").html("")
            if (data.value !== "请选择") {
                CoreUtil.sendAjax("/health/batch/options", {doctorId: data.value}, function (res) {
                    if (res.list != null) {
                        let list = res.list;
                        list.map((data) => {
                            $("#batch").append(
                                `
                                 <div>
                                    <div>时间：${CoreUtil.formatTimeMonth(data.startingTime)}----${CoreUtil.formatTimeMonth(data.endTime)}</div>
                                    <div>剩余：${data.num}</div>
                                    <a class="layui-btn layui-btn-primary layui-border-green">  <input type="radio" name="batchId" value="${data.id}" title="预约" class="layui-input" lay-verify="required"></a>
                                 </div>
                            `
                            )
                        })
                    }
                    form.render();
                }, "GET", false);
            }
        })
        //监听提交
        form.on('submit(submit)', function (data) {
            layer.open({
                content: `
            门诊就诊须知
            尊敬的病友：

            为方便您就诊，请您仔细阅读以下内容：

            一、我院除急诊和发热门诊外，全面实施分时段预约挂号，请提前进行预约，按时段就诊。

            二、发热或有急性呼吸道症状的初诊患者,请及时与社区联系，在社区的安排下到定点医疗机构发热门诊就诊。

            三、为保障您和家人健康，请您：

              （一）在预检分诊处测量体温，接受新冠肺炎接触史、中高风险地区旅行史等询问，主动出示健康码或扫描门诊入口处武汉战疫二维码。

              （二）全程佩戴口罩，与他人保持1米以上间距。

            `,
                yes: function (index, layero) {
                    if (data.field.id === "") {
                        CoreUtil.sendAjax("/health/reserve/save", JSON.stringify(data.field), function (res) {
                            layer.msg(res.msg);
                        }, "POST", false);
                    } else {
                        CoreUtil.sendAjax("/health/reserve/save", JSON.stringify(data.field), function (res) {
                            layer.msg(res.msg);
                        }, "PUT", false);
                    }
                }
            });

            return false;
        });


    });
</script>
</html>